<template>
	<image :src="imgURL3+'activity/bg1.png'" mode="widthFix" style="width: 100%;position: relative;"></image>
	<view style="margin-top: -70px;position: absolute;width: 100%;padding:20px">
		<view class="card" style="height: auto;width: 100%;padding: 13px;">
			<view class="flex-row" style="height: 60px;">
				<view class="button-1">报名中</view>
				<view class="text-lg text-bold" style="margin-left: 10px;">6月9号周日 {{detaill.activityName}}</view>
			</view>
			<view class="margin-bottom-xs text-df">时间： {{detaill.startDatetime}} - {{detaill.endDatetime}}</view>
			<view style="margin-bottom: 10px; display: flex; justify-content: space-between;" @click="navigator">
				<view class="text-df">地点： {{detaill.address}}</view>
				<image :src="imgURL3+'activity/luj.png'" style="width: 22px;height: 22px;"></image>
			</view>
			<view class="margin-bottom-xs text-df">条件： 活动名额{{detaill.maxCount}}人</view>
			<view style="color: #8E8E8E;font-size: 12px;">报名截止时间 {{detaill.signEndDatetime}}</view>
		</view>
	</view>
	<view class="page">
		<view :class="launch?'card-launch':'card-narrow'">
			<view class="text-lg text-bold">活动介绍</view>
			<view :class="launch?'launch-text':'narrow-text'" style="color:#5B5B5B;margin: 10px;">
				{{detaill.description}}
			</view>
			<view v-if="!launch" style="font-size: 12px;color: #8E8E8E;text-align: center;margin-bottom: 10px;"
				@click="launch =!launch">查看更多<uni-icons type="down" size="15" color="#5B5B5B"></uni-icons></view>
			<view v-if="launch" style="font-size: 12px;color: #8E8E8E;text-align: center;margin-bottom: 10px;"
				@click="launch =!launch">缩小查看<uni-icons type="up" size="15" color="#5B5B5B"></uni-icons></view>
		</view>
		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">招募岗位</view>
			<view class="margin-top-xs" style="display: flex;justify-content: space-between;">
				<view class="flex-row">
					<view>志愿者</view>
					<view class="margin-left-xs" style="color: #8E8E8E;">({{detaill.maxCount}}人)</view>
				</view>
				<view v-if="!post" style="font-size: 12px;color: #8E8E8E;text-align: center;margin-bottom: 10px;"
					@click="post =!post"><uni-icons type="down" size="15" color="#5B5B5B"></uni-icons></view>
				<view v-if="post" style="font-size: 12px;color: #8E8E8E;text-align: center;margin-bottom: 10px;"
					@click="post =!post"><uni-icons type="up" size="15" color="#5B5B5B"></uni-icons></view>
			</view>
			<view v-if="post" style="background-color: #F5F5F5; width: 100%;padding: 20px;height:auto;">
				<view style="font-size: 12px;color: #8E8E8E;">岗位需求</view>
				<view v-for="(item,index) in detaill.jobList" style="font-size: 14px;color: #5B5B5B; margin-top: 15px;"
					:key="index">{{item.jobName}}({{item.jobCount}})</view>
			</view>
		</view>
		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">活动特色</view>
			<view style="display: flex; margin: 20px 0 10px 0;">
				<view class="flex-row">
					<image :src="imgURL3+'activity/p7.png'" style="width: 22px;height: 22px;"></image>
					<view style="font-size: 14px;color: #5B5B5B;margin-left: 3px;"> 现场活动</view>
				</view>
				<view class="flex-row" style="margin-left: 15px;">
					<image :src="imgURL3+'activity/p8.png'" style="width: 22px;height: 22px;"></image>
					<view style="font-size: 14px;color: #5B5B5B;margin-left: 3px;"> 关爱服务</view>
				</view>
				<view class="flex-row" style="margin-left: 15px;">
					<image :src="imgURL3+'activity/p9.png'" style="width: 18px;height: 18px;"></image>
					<view style="font-size: 14px;color: #5B5B5B; margin-left: 3px;"> 2.0公益时</view>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">活动场次</view>
			<view v-for="(item,index) in detaill.sessionList"
				style="width: 100%;margin-top: 10px;background-color: #F5F5F5;height: auto;padding: 20px;">
				<view class="flex-row">
					<image :src="imgURL3+'activity/p11.png'" style="height: 15px;width: 15px;"></image>
					<view class="text-df" style="color: #5B5B5B;margin-left: 10px;">{{item.sessionName}}
					</view>
				</view>
				<view class="text-df" style="color: #5B5B5B;margin: 10px 0 0 10px;">活动时间： {{item.startDatetime}}</view>
				<view class="text-df" style="color: #5B5B5B;margin: 10px 0 0 10px;">公益时间： 2.0小时</view>
			</view>
		</view>
<!-- 		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">已报名的志愿者</view>
			<view style="display: flex;justify-content: space-between; margin-top: 20px;width: 100%;">
				<view class='cdtouxiang'>
					<view v-for="(item, index) in images" :key="index" style="transform:translateX(-{{index*20}}rpx)">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</view>
				<view style="color: #8E8E8E;font-size: 14px;width: 20%;margin-top: 5px;">15人<uni-icons type="right"
						size="15" color="#8E8E8E"></uni-icons></view>
			</view>
		</view> -->
<!-- 		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">活动福利</view>
			<view style="display: flex;justify-content: space-between; margin-top: 20px;">
				<view style="display: flex;">
					<image :src="imgURL3+'activity/p12.png'" style="width: 20px;height: 20px;"></image>
					<view style="font-size: 14;color: #5B5B5B;">1公益时获取1朵小红花</view>
				</view>
			</view>
		</view> -->
		<view class="card" style="margin-top: 30px;padding: 20px;height:auto;">
			<view class="text-lg text-bold">主办方</view>
			<view style="display: flex;justify-content: space-between; margin-top: 20px;">
				<view style="display: flex;">
					<image :src="imgURL3+'activity/p13.png'" style="width: 30px;height: 30px;border-radius: 50%;">
					</image>
					<view
						style="font-size: 12;color: #5B5B5B;height: 100%;display: flex;align-items: center; margin-left: 5px;">
						{{detaill.organizerList[0].name}}</view>
				</view>
				<!-- <view style="color: #8E8E8E;font-size: 14px;"><uni-icons type="right" size="15" color="#8E8E8E"></uni-icons></view> -->
			</view>
		</view>
	</view>
	
	<uni-popup ref="popup" type="center" border-radius="20px 20px 20px 20px" background-color="#ffffff">
		<view class="bg-white  text-df" style="width: 600rpx;height: 400rpx;border-radius: 50px;">
			<view style="text-align: right;" class="padding-xs">
				<uni-icons type="closeempty" size="20" @click="colse_pop"></uni-icons>
			</view>
			<view class="flex-row" style="padding: 50rpx;">
				<view style="margin-top: 10rpx;">选择岗位:</view>
				<view style="padding:0 30rpx;width: 350rpx;">
					<uni-data-select v-model="jobId" :localdata="activejob.joblist" @change="changelandscape"></uni-data-select>
				</view>
			</view>
			<view style="width: 100%;display: flex; justify-content: center;padding: 30rpx;"
				class="text-df">
				<view class="disagree-text" @click="colse_pop">
					返回
				</view>
				<view class="agree-text" @click="agree_xieyi">
					报名
				</view>
			</view>
		</view>
	</uni-popup>
	
	<view style="height: 64px;"></view>
	<view style="width: 100%;height: auto;left: 0;bottom: 0;position: fixed;background-color: #ffffff;">
		<view style="width: 100%; height: 64px;display: flex;align-items: center;justify-content: space-around;">
			<view v-if="falg == 0" @click="getsignup" class="button-2">立即报名</view>
			<view v-if="falg == 1" class="button-2">已报名</view>
			<image :src="imgURL3+'activity/p14.png'" style="width: 20px;height: 20px;"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { imgURL3 } from '../../api/request'
	import { detailTo, signup } from '../../api/active/active';
	// import { detailTo } from '../../api/active/active'
	const launch = ref(false)
	const post = ref(false)
	const ID = ref(0)
	const falg = ref(0)
	const active = reactive(["包粽子义工", "安源敬老院文艺汇演"])
	const images = reactive(['https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png', 'https://api.anred.qrsk.net/applet/profile/image/activity/p13.png'])

	//经纬度
	const tude = reactive({
		longitude: '',
		latitude: ''
	})

	onLoad((Option) => {
		ID.value = Option.id
		console.log(ID.value, 'aaaaaaaaaaaaaa')
		falg.value = Option.falg
		getdetaill()
	})

	const detaill = ref({})

	const getdetaill = () => {
		detailTo({ activityId: ID.value }).then(res => {
			detaill.value = res.data
			//获取经纬度
			getTude()
		})
	}

	const getsignup = () => {
		open_pop()
	}
	//导航
	const navigator = () => {
		wx.openLocation({
			latitude: Number(tude.latitude),
			longitude: Number(tude.longitude),
			name: detaill.value.address,
			scale: 12
		})
	}

	//获取经纬度
	const getTude = () => {
		uni.request({
			url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
			method: 'GET',
			data: {
				key: '84b002e324e6d4e5e6b9541c6cbf8b71',
				address: detaill.value.address
			},
			success: (res) => {
				console.log(JSON.stringify(res.data))
				tude.longitude = res.data.geocodes[0].location.split(',')[0]  //经度
				tude.latitude = res.data.geocodes[0].location.split(',')[1]  //维度
				console.log(tude.longitude, tude.latitude)
			}
		})
	}
	//弹窗
	const popup = ref(null)
	const jobId = ref('')
	const activejob = reactive({
		joblist:[]
	})
	//打开弹出
	const open_pop = () => {
		popup.value.open()
		console.log(activejob.joblist)
		activejob.joblist = detaill.value.jobList.map(item =>({
			text:item.jobName,
			value:item.id
		}))
		console.log(activejob.joblist)
		// getIntegralCode().then((res:any)=>{
		// 	Integral.form = res.data
		// 	console.log(Integral.form)
		// })
	}
	
	const colse_pop = () => {
		popup.value.close()
	}
	const changelandscape = () =>{
		console.log(jobId.value,'jobId')
	}
    const agree_xieyi = ()=>{
	 signup({ activityId:ID.value,jobId:jobId.value }).then(res => {
	 	if (res.code === 200) {
	 		uni.showToast({
	 			icon: "success",
	 			title: "报名成功"
	 		})
	 		falg.value = 1
			popup.value.close()
	 	}
	 })
 }
</script>

<style>
	page {
		background-color: #EFEFEF;
	}

	.page {
		width: 100%;
		padding: 20px;
		background-color: #EFEFEF;
		min-height: 1000px;
	}

	.card {
		width: 100%;
		background-color: #fff;
		border-radius: 20px;
	}

	.card-launch {
		margin-top: 180px;
		width: 100%;
		border-radius: 20px;
		padding: 13px;
		background-color: #fff;
	}

	.card-narrow {
		margin-top: 180px;
		width: 100%;
		height: 200px;
		border-radius: 20px;
		padding: 13px;
		background-color: #fff;
	}

	.launch-text {
		font-size: 14px;
		line-height: 24px;
	}

	.narrow-text {
		font-size: 14px;
		height: 122px;
		line-height: 24px;
		overflow: hidden;
	}

	.button-1 {
		height: 30px;
		width: 70px;
		background: #EE3F4D;
		border-radius: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
	}

	.button-2 {
		height: 40px;
		width: 220px;
		background: #EE3F4D;
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #fff;
	}

	.cdtouxiang {
		height: auto;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.cdtouxiang image {
		display: inline-block;
		width: 60rpx;
		height: 60rpx;
		border-style: solid;
		font-weight: bold;
		border-width: 1rpx;
		border-color: white;
		border-radius: 50%;
	}
	.agree-text {
		height: 36px;
		width: 40%;
		margin-left: 8%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}
	
	.disagree-text {
		height: 36px;
		width: 40%;
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		color: #EE3F4D;
		border: 1px solid #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>
